import React, { FC, useState, useEffect } from "react";
import RadarChart from "@/components/RadarChart";
import { initialRadarState, initialIndicatorList } from "@/constant";
import { queryRadorCharts } from "@/apis/charts";
import type { ChartPropsType } from "@/types/echartInterface";
const RadarView: FC<ChartPropsType> = (props: ChartPropsType) => {
  const { times } = props;

  
  const [radarList, setRadarList] = useState(initialRadarState.radarList);
  const [indicatorList] = useState(initialIndicatorList);
  const radarStyle = {
    width: "500px",
    height: "350px",
  };
  const handleRadar = async () => {
    const res = await queryRadorCharts({
      times,
    });
    const seriesList: Array<number> = [];
    indicatorList?.forEach((i) => {
      res.radarList?.forEach((j) => {
        if (i.name === j.name) {
          seriesList.push(j.value);
        }
      });
    });
    setRadarList([seriesList]);
  };
  useEffect(() => {
    handleRadar();
  }, [times]);
  return (
    <div style={{marginTop:"11px"}}>
      <RadarChart
        radarChartStyle={radarStyle}
        radarList={radarList}
        indicatorList={indicatorList}
      />
    </div>
  );
};

export default RadarView;
